<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <AreaSelector></AreaSelector>

      <el-button type="primary" :icon="Plus">新增公寓</el-button>

      <el-table :data="apartmentList" border stripe style="margin: 20px 0;">
        <el-table-column label="名称" show-overflow-tooltip prop="name" align="center" ></el-table-column>
        <el-table-column label="详细地址" show-overflow-tooltip prop="addressDetail" align="center" ></el-table-column>
        <el-table-column label="空闲房间数" prop="freeRoomCount" align="center"></el-table-column>
        <el-table-column label="房间总数" prop="totalRoomCount" align="center" ></el-table-column>
        <el-table-column label="所属省份" prop="provinceName" align="center" ></el-table-column>
        <el-table-column label="所属城市" prop="cityName" align="center" ></el-table-column>
        <el-table-column label="所属区域" prop="districtName" align="center" ></el-table-column>
        <el-table-column label="联系方式" show-overflow-tooltip prop="phone" align="center" ></el-table-column>
        <el-table-column label="入住状态" align="center">
          <template v-slot="{row,$index}">
            <div class="flex gap-2">
              <el-tag v-if="row.freeRoomCount > 0" type="success">可入住</el-tag>
              <el-tag v-else type="danger">已满</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template v-slot="{row,$index}">
            <el-switch
              v-model="row.isRelease"
              class="ml-2"
              style="--el-switch-on-color: #409EFF; --el-switch-off-color: #DCDFE6"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row, $index }">
            <el-button type="warning" :icon="Edit">修改</el-button>
            <el-button type="danger" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[100, 200, 300, 400]"
        layout="prev, pager, next, jumper,->,sizes,total" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />

    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import {ApartmentData,ApartmentParamType,PageResData,getApartmentList} from '@/api/apartmentManagement/apartment'
import { ref , onMounted} from "vue"
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
const page = ref(1)
const limit = ref(5)
const total = ref(0)

let queryVoParam = ref<ApartmentParamType>({
  current:1,
  size:2
})
let apartmentList = ref<ApartmentData[]>([]);
let doGetApartmentList = async()=>{
  let {code,data} = await getApartmentList(queryVoParam.value);
  if(code == 200){
    apartmentList.value = data.records;
    apartmentList.value.map(item=>{
      item.isRelease = item.isRelease == 1;
      return item
    })
  }
}
onMounted(()=>{
  doGetApartmentList();
})


</script>